const ORIGINAL_THEME = '#409EFF'
const version = '2.15.13' // 改成你实际使用的 element-ui 版本

let chalk = ''

function getThemeCluster(theme) {
  const tintColor = (color, tint) => {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    if (tint === 0) {
      return [red, green, blue].join(',')
    } else {
      red += Math.round(tint * (255 - red))
      green += Math.round(tint * (255 - green))
      blue += Math.round(tint * (255 - blue))

      red = red.toString(16).padStart(2, '0')
      green = green.toString(16).padStart(2, '0')
      blue = blue.toString(16).padStart(2, '0')

      return `#${red}${green}${blue}`
    }
  }

  const shadeColor = (color, shade) => {
    let red = parseInt(color.slice(0, 2), 16)
    let green = parseInt(color.slice(2, 4), 16)
    let blue = parseInt(color.slice(4, 6), 16)

    red = Math.round((1 - shade) * red)
    green = Math.round((1 - shade) * green)
    blue = Math.round((1 - shade) * blue)

    red = red.toString(16).padStart(2, '0')
    green = green.toString(16).padStart(2, '0')
    blue = blue.toString(16).padStart(2, '0')

    return `#${red}${green}${blue}`
  }

  const clusters = [theme]
  for (let i = 0; i <= 9; i++) {
    clusters.push(tintColor(theme, Number((i / 10).toFixed(2))))
  }
  clusters.push(shadeColor(theme, 0.1))
  return clusters
}

export function updateStyle(style, oldCluster, newCluster) {
  let newStyle = style
  oldCluster.forEach((color, index) => {
    newStyle = newStyle.replace(new RegExp(color, 'ig'), newCluster[index])
  })
  return newStyle
}

function getCSSString(url) {
  return new Promise((resolve) => {
    const xhr = new XMLHttpRequest()
    xhr.onreadystatechange = () => {
      if (xhr.readyState === 4 && xhr.status === 200) {
        const styleText = xhr.responseText.replace(/@font-face{[^}]+}/, '')
        resolve(styleText)
      }
    }
    xhr.open('GET', url)
    xhr.send()
  })
}

export async function updateTheme(newTheme) {
  if (typeof newTheme !== 'string') return

  const themeCluster = getThemeCluster(newTheme.replace('#', ''))
  const originalCluster = getThemeCluster(ORIGINAL_THEME.replace('#', ''))

  if (!chalk) {
    const url = `https://unpkg.com/element-ui@${version}/lib/theme-chalk/index.css`
    chalk = await getCSSString(url)
  }

  // 注入 chalk 样式
  const chalkStyleId = 'chalk-style'
  let styleTag = document.getElementById(chalkStyleId)
  if (!styleTag) {
    styleTag = document.createElement('style')
    styleTag.setAttribute('id', chalkStyleId)
    document.head.appendChild(styleTag)
  }
  styleTag.innerText = updateStyle(chalk, originalCluster, themeCluster)

  // 替换其他 style 中的默认颜色
  const styles = [].slice.call(document.querySelectorAll('style'))
    .filter(style => {
      const text = style.innerText
      return new RegExp(ORIGINAL_THEME, 'i').test(text) && !/Chalk Variables/.test(text)
    })

  styles.forEach(style => {
    const { innerText } = style
    if (typeof innerText !== 'string') return
    style.innerText = updateStyle(innerText, originalCluster, themeCluster)
  })
}
